<template>
  <div class="header">
    <div class="personal">
      <el-badge :is-dot="info > 0" class="item">
        <el-icon><Bell /></el-icon>
      </el-badge>
      <el-avatar
        class="ml mr"
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          欢迎你,{{ username }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="User" command="user"
              >个人中心</el-dropdown-item
            >
            <el-dropdown-item icon="SwitchButton" command="logout"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useUserStore } from '@/store/auth';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
const router = useRouter();
const userStore = useUserStore();
const { username } = storeToRefs(userStore);
const info = ref(5);

const handleCommand = (e: string) => {
  console.log('🚀 ~ e:', e);
  if (e === 'user') {
    router.push('/personal');
  } else {
    userStore.logout();
    router.push('/login');
  }
};
</script>

<style lang="less" scoped>
.header {
  background-color: #fff;
  height: 60px;
  padding: 0 20px;
  .personal {
    float: right;
    display: flex;
    align-items: center;
    height: 60px;
    .item {
      margin-top: 10px;
    }
  }
}
</style>
